<template>
  <div>
    <div v-if="type=='text' || type=='number'" class="gs--input-box">
      <input  autocomplete="on" class="input" :class="[gsStyle ? 'gs-input--'+gsStyle:'']" @input="input" :value="value" 
      :disabled="disabled" :type="type" 
      @focus="focusSelect" :placeholder="placeholder"></input>
      <div v-if="long" class="gs-input--long" :class="[value.length == long ? 'shake':'' ]">{{beginLong +"/"+ long}}</div>
    </div>

    <div v-else-if="type=='inputButton'" class="gs--input-box">
      <input autocomplete="on" class="input gs-input--search"  :class="[gsStyle ? 'gs-input--'+gsStyle:'']" 
       :disabled="disabled" @focus="focusSelect" :placeholder="placeholder" :type="type"  :value="value" @input="input"
       ></input>
      <i class="gs-input--i" :class="icon" @click="searchClick(value)"></i>
    </div>

    <div v-else-if="type=='textarea'" class="gs--textarea-box">
      <textarea :placeholder="placeholder"  :value="value" class="gs-input--textarea" :class="[gsStyle ? 'gs-input--'+gsStyle:'']"  @focus="focusSelect" 
      @input="input" :disabled="disabled"></textarea>
      <div v-if="long" class="gs-input--long" :class="[value.length == long ? 'shake':'' ]" style="font-size:11px">{{beginLong +"/"+ long}}  </div>
    </div>
    
    
  </div>
<!-- :oninput="long ? 'if(value.length>'+long +') value=value.slice(0,'+ (long - 1) +')' : false" -->
  
</template>
<script>
export default {
/**
 * @params long：长度
 * @params type: 输入类型
 * @params disabled: 禁用
 * @params select: 是否选中 默认选中
 * @params placeholder: 输入提示
 * @params icon: 图标  配合type = inputButton
 * @params gsStyle: 风格
 */
  name: 'gsInput',
  props:{
    long:Number,
    type:String,
    disabled:Boolean,
    select:Boolean,
    placeholder:String,
    icon:String,
    gsStyle:String,
    value:null
  },
  model:{
    prop:'value',
    event:'gsdate'
  },
  data(){
    return {
      beginLong:0,
      endLong:0
    }
  },
  methods:{
    input(e){
      if(String(e.target.value).length>this.long) e.target.value = String(e.target.value).slice(0,this.long)
      this.beginLong = String(e.target.value).length || 0;
      this.$emit("gsdate",e.target.value);
    },
    searchClick(){
      if(this.disabled)return
      this.$emit("searchClick",arguments)
    },
    focusSelect(event){
      if (this.select) event.currentTarget.select();
      
    },
  },
  
}
</script>



